@charset "utf-8";

.body-main{
  background: #fff;
  padding-top: 40px;
  .prod-intro{
    width: 1240px;
    min-height: 700px;
    margin:0 auto;
    padding-bottom: 50px;
    .pic{
      float: left;
      margin-right: 80px;
      width: 482px;

      .box {
        border: 1px solid transparent;
        width: 480px;
        height: 480px;
        background: #fff;
        position: relative;
        &:hover{
          border: 1px solid #ddd;
        }
      }
      .big {
        width: 510px;
        height: 510px;
        position: absolute;
        top: 0;
        left: 500px;
        border: 1px solid #ddd; 
        overflow: hidden;
        display: none;
        background: #fff;
        z-index: 1;
        img{
          vertical-align: top;
          position: absolute;
        }
      }
      .mask {
        width: 240px;
        height: 240px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
      }
    
      .small {
        position: relative;
        img{
          width: 100%;
        }
      }
    }
    .picbox-thumb{
      width: 480px;
      margin-top: 40px;
      .swiper{
        position: relative;
        width: 450px;
        height: 92px;
        .swiper-slide{
          width: 90px;
          display: inline-block;
          position: relative;
          .img{
            width: 90px;
            height: 90px;
            img{
              width: 100%;
            }
          }
          
        }
        .active:after{
          background-color: #CDCDCD;
          bottom: 0;
          content: '';
          height: 3px;
          left: 0;
          position: absolute;
          width: 100%;
        }
        .swiper-button-next{
          &::after{
            font-size: 18px;
          }
          margin-right: -230px;
        }
        .swiper-button-prev{
          &::after{
            font-size: 18px;
          }
          margin-left: -230px;
        }
      }
    }
    .feature-box{
      // width: 510px;
      font-size: 14px;
      padding: 10px 35px;
      margin-top: 24px;
      background: rgb(250, 250, 250);
      ul{
        margin: -20px 0 0 -30px;
      }
      .feature-box-item{
        display: inline-block;
        margin-top: 20px;
        margin-left: 40px;
        white-space: nowrap;
      }
      img{
        width: 16px;
        height: 16px;
        display: inline-block;
      }
    }

    .info{
      float: left;
      width: 678px;
      .sInfo-wrap-content{
        background: #FAFAFA;
      }
      .info-title{
        font-size: 18px;
      }
      .sInfo-subtitle{
        font-size: 14px;
        color: red;
        margin-top: 5px;
      }
      .sInfo-wrap{
        .divider{
          background: #F0F0F0;
          height: 5px;
          margin-top: 11px;
        }
      }
      .row-box{
        line-height: 24px;
        padding: 0 20px 16px 15px ;
        .item-label{
          font-size: 14px;
          height: 24px;
          width: 45px;
          overflow: hidden;
          text-align: justify; 
 
          &::after{
            content: '';
            display: inline-block;
            height: 0;
            line-height: 0;
            width: 100%;
          }
        }
        .js-coupon-show-more{
          cursor: pointer;
          color: #F33;
          border-bottom: 1px solid #F33;
          border-top: 1px solid #f33;
          box-sizing: border-box;
          height: 18px;
          background: #FFEBE9;
          font-size: 12px;
          padding: 1px 5px;
          position: relative;
          left: 4px;
          &::before{
            content: "";
            vertical-align: middle;
            background: url("../../images/manjian.png") no-repeat;
            display: inline-block;
            width: 6px;
            background-position: 0 0;
            height: 20px;
            position: absolute;
            top: -1px;
            left: -4px;
          }
          &::after{
            content: "";
            vertical-align: middle;
            background: url("../../images/manjian.png") no-repeat;
            display: inline-block;
            width: 6px;
            background-position: -6px 0;
            height: 20px;
            position: absolute;
            top: -1px;
            right: -4px;
          }
        }
        .row-box-content{
          font-size: 14px;
          color: #666;
          .tag{
            display: inline-block;
            text-align: center;
            width: 40px;
            line-height: 18px;
            border-radius: 15px;
            background:#ffebe9 ;
            color: #ff333e;
          }
        }
      }
      .sInfo-wrap-content{
        padding-top: 15px;
        .row-box-label{
          float: left;
          margin-right: 10px;
        }
        .pirce{
          display: inline-block;
          font-size: 24px;
          .nowpirce{
            color:#fa5437;
            font-weight: 600;
          }
          .oldpirce{
            font-size: 12px;
            text-decoration: line-through;
          }
        }
      }
      .info-notice{
        margin: 10px 0;
        .info-notice-connent{
          background-color: #ffebc6;
          background-image: url("../../images/tongzhi.png");
          background-repeat: no-repeat;
          background-size: 19px 19px;
          background-position: 5px center;
          color: #ff3333;
          padding: 5px 10px 3px 30px;
          border-radius: 8px;
        }
      }
      >.sInfo-wrap{
        >.sInfo-wrap-content{
          background: none;
          padding-top: 20px;
          .sInfo-cate{
            padding: 0 15px 5px;
            .cate-label{
              display: inline-block;
              font-size: 14px;
              height: 24px;
              width: 45px;
              overflow: hidden;
              text-align: justify; 
              margin-right: 10px;
              color:#99a5c2 ;
              &::after{
                content: '';
                display: inline-block;
                height: 0;
                line-height: 0;
                width: 100%;
              }
            }
            .cate-list{
              display: inline-block;
              position: absolute;
              width: 360px;
              .cate-item{
                display: inline-block;
                margin: 0 10px 10px 0;
                a{
                  display: block;
                  border: 1px solid #dddddd;
                  padding: 0 20px;
                  height: 26px;
                  line-height: 26px;
                  font-size: 14px;
                  border-radius: 4px;
                }
                
              }
              .cur{
                a{
                border: 1px solid #ff3333;
                background:#ffebe9 ;
                }
              }
            }
          }
        }
      }

    }
    .product-status{
      .item-label{
        color: #999999;
      }
      .gcIpt{
        display: inline-block;
        a{
          float: left;
          width: 26px;
          height: 26px;
          line-height: 26px;
          font-size: 18px;
          text-align: center;
          border: 1px solid #dddddd;
          vertical-align: middle;
          font-family: simsun;
          .hover{
            color: #fa5437;
          }
        }
        .goodsCount{
          float: left;
          outline: none;
          width: 40px;
          height: 26px;
          line-height: 26px;
          font-size: 18px;
          font-family: arial;
          text-align: center;
          vertical-align: middle;
          border:1px solid #ddd ;
          background: #fff;
          color: #999;
        }
        .disabled{
          background: #fff;
          color: #ddd;
          cursor: not-allowed;
        }
        .icon-zhuyi{
          color: #ff5555;
          cursor: pointer;
        }
        
      }
      .sInfo-btns .btn{
        margin-right: 15px;
      }
    }
    
  }

  .gInfo{
    margin: 0 auto;
    width: 1000px;
    .detail-imgs-box-poster{
      >p{
        margin-bottom: 5px;
      }
      img{
        vertical-align: top;
        width: 100%;
      }
    }
    .gInfo-tab{
      .content{
        background: #fff;
        border: 1px solid #DDD;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 7px 0;
        position: relative;
      }
    }
    .gInfo-tab-oper{
      float: right;
      .btn{
        font-size: 18px;
        line-height: 34px;
        margin-right: 6px;
        width: 152px;
      }
    }
    .gInfo-tab-list{
      line-height: 36px;
      .nav-item{
        border-left: 1px solid #333;
        color: #666;
        display: inline-block;
        font-size: 14px;
        line-height: 14px;
        margin-left: -1px;
        padding: 0 30px;
        &:first-child{
          border-left: none;
        }
        .nav-item-inner{
          position:relative;
          
        }
        .nav-item-inner::after{
          content: '';
          background-color: #F33;
          background: -webkit-linear-gradient(left,#f33 0,rgba(255,51,51,.3) 100%);
          background: linear-gradient(
      90deg,#f33 0,rgba(255,51,51,.3) 100%);
          bottom: -1px;
          display: none;
          height: 5px;
          left: 0;
          position: absolute;
          right: 0;
          }
      }
      
      .on{
        .nav-item-inner::after{
          display: block;
        }
      }
    }
    .gInfo-content{
      border: 1px solid #DDD;
      margin-top: -1px;
      margin-bottom: 10px;
    }
    .gCon{
      background: #fff;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px 0;
      text-align: center;
    }
    .detail-imgs-box-cont{
      img{
        width: 100%;
      }
      >div{
        color: #999; 
        text-align: left; 
        font-size: 16px;
        padding: 20px;
      }
    }
  }
}

.btn{
  background-image: none;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
.btn-submit{
  border-radius: 6px;
  font-size: 20px;
  font-weight: 400;
  line-height: 38px;
  width: 200px;
}
.btn-buy{
  background: #FFEBE9;
  border-color: #F33;
  color: #F33;
}
.btn-liner{
  background: linear-gradient(
180deg,#F33 0,#F63 100%);
    color: #fff;
}

.btn-like{
  background: #FAFAFA;
  border-radius: 6px;
  border: 1px solid #E7E7E7;
  line-height: 38px;
  width: 80px;
  color: #F33;
  .icon-aixin{
    font-size: 22px;
  }
  
}